import React, { useState } from 'react';

export default function CounterHook2() {
    // 对于返回的数组解构
    const [count, setCount] = useState(0);

    function handleBtnClick() {
        // 这样写只会调用一次,因为内部会合并
        // setCount(count + 10);
        // setCount(count + 10);
        // setCount(count + 10);
        // setCount(count + 10);

        // 这写就会+40 因为这个函数每次返回的都上上一次的结果
        setCount((prevCount) => prevCount + 10);
        setCount((prevCount) => prevCount + 10);
        setCount((prevCount) => prevCount + 10);
        setCount((prevCount) => prevCount + 10);
    }

    return (
        <div>
            <h2>当前计数: {count}</h2>
            <button onClick={e => setCount(count + 1)}>+1</button>
            
            <button onClick={e => setCount((prevCount) => prevCount + 5)}>+5</button>
            <button onClick={handleBtnClick}>+10</button>
            <button onClick={e => setCount(count - 1 )}>-1</button>
        </div>
    )
}
